<script setup lang="ts">
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const onChange = (event: Event) => {
  username.value = (event.target as HTMLInputElement).value
  console.log(username.value)
}
const login = () => {
  console.log(username.value, password.value)
}
const reset = () => {
  username.value = ''
  password.value = ''
}
</script>

<template>
  <div id="app">
    <!-- 账户：<input v-model="username" type="text" /> <br /><br /> -->
    <!-- v-model的底层逻辑写法 -->
    <!--底层逻辑是value属性和input事件的结合 -->
    账户：<input :value="username" type="text" @input="onChange" /> <br /><br />
    密码：<input v-model="password" type="password" /> <br /><br />
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
</template>

<style></style>
